import React, { Component } from 'react';
import './index.less';
// import { Link, Redirect } from 'umi';
import { Menu, Icon, Popover, Button, Avatar, Modal } from 'antd';
import { _getInfo } from '@/api/infoapi';
import Link from 'umi/link';
import router from "umi/router"
import cookie from 'react-cookies';
const { SubMenu } = Menu;

class BasicLayout extends Component {
  state = {
    current: 'mail',
    username: '',
    portrait: '',
    role: '',
    visible: false,
  };

  showModal1 = () => {
    console.log(111111);

    this.setState({
      visible: true,
    });
  };

  handleOk = (e: any) => {
    console.log(e);
    // window.localStorage.clear()
    cookie.remove("token")
    router.push("/login")
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e: any) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  //气泡框数据
  content = (
    <div>
      <p>
        <Icon type="user" />
        个人中心
      </p>
      <p>
        <Icon type="profile" />
        我的待办
      </p>
      <p onClick={this.showModal1}>
        <Icon type="poweroff" />
        退出
      </p>
    </div>
  );

  handleClick = (e: { key: any }) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  };
  render() {
    console.log(this.props,"station");
    
    return (
      <div className="box">
        <div className="headerbox">
          <div className={this.state.role == 'student' ? 'header' : 'header1'}>
            <div className="img">
              <img src="http://111.203.59.61:8060/static/img/bw.a718dea8.png" alt="" />
            </div>

            <div className="list">
              <Menu
                onClick={this.handleClick}
                selectedKeys={[this.state.current]}
                mode="horizontal"
                theme="dark"
                className={this.state.role == 'student' ? '' : 'menu'}
              >
                <Menu.Item key="station">
                  <Link to="/station">岗位</Link>
                </Menu.Item>
                <Menu.Item key="train">
                  <Link to="/train">培训</Link>
                </Menu.Item>
                {this.state.role == 'student' ? (
                  <Menu.Item key="practical">实训</Menu.Item>
                ) : (
                  <SubMenu  title={<span className="submenu-title-wrapper">实训</span>}>
                    <Menu.Item key="setting:1">
                      <Link to="/plan" style={{ color: 'white' }}>
                        计划
                      </Link>
                    </Menu.Item>
                    <Menu.Item key="setting:2">
                      <Link to="/progress" style={{ color: 'white' }}>
                        进度
                      </Link>
                    </Menu.Item>
                    <Menu.Item key="setting:3">
                      <Link to="/reply" style={{ color: 'white' }}>
                        答辩
                      </Link>
                    </Menu.Item>
                  </SubMenu>
                )}

                <SubMenu
                  title={
                    <span className="submenu-title-wrapper">
                      面试
                      <Icon type="down" />
                    </span>
                  }
                >
                  <Menu.Item key="setting:4">
                    <Link to="/interviewrecords" style={{ color: 'white' }}>
                      面试记录
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="setting:5">
                    <Link to="/myinterviewrecords" style={{ color: 'white' }}>
                      我的面试记录
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="setting:6">
                    <Link to="/interviewrank" style={{ color: 'white' }}>
                      面试排行榜
                    </Link>
                  </Menu.Item>
                </SubMenu>

                <SubMenu title={<span className="submenu-title-wrapper">问答</span>}>
                  <Menu.Item key="setting:7">
                    <Link to="/answerlist" style={{ color: 'white' }}>
                      问答列表
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="setting:8">
                    <Link to="/myanswer" style={{ color: 'white' }}>
                      我的问答
                    </Link>
                  </Menu.Item>
                </SubMenu>
              </Menu>
            </div>
            <div className={this.state.role == 'student' ? 'my' : ' my menu'}>
              <Icon type="bell" />
              <div>
                <Popover placement="bottomLeft" content={this.content} arrowPointAtCenter>
                  <img
                    src="http://111.203.59.61:8060/file_service/group1/M00/00/15/rBsCHWCGYLaAcY4xAAB9VTKcpmE34.jpeg"
                    alt=""
                    className="img"
                  />
                  <Modal
                    title="提示"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确定"
                    cancelText="取消"
                  >
                    <p><Icon type="exclamation-circle" style={{color:"#ffba00",fontSize:"24px",marginRight:"20px",lineHeight:"30px"}}/>确定注销并退出系统吗?</p>
                  </Modal>
                </Popover>
                <span>{this.state.username}</span>
              </div>
            </div>
          </div>
        </div>
        <div className="routerbox">
          <div className="router">
           <span>
             {
            this.props.route.routes.find((item,index)=>{
                return item.path==this.props.location.pathname
              }).meta
            }
             </span> 
          </div>
        </div>
        {/* 主体 */}
        <div className="main">{this.props.children}</div>
        {/* 尾部 */}
        <div className="footerbox">
          <div className="footer">
            <div className="left">
              <img src="http://111.203.59.61:8060/static/img/bottom_logo.c8aa9859.png" alt="" />
              <h3>400-008-0987</h3>
            </div>
            <div className="center">
              <div className="title">
                <h3>走进八维</h3>
                <span>集团概况</span>
                <span>八维动态</span>
                <span>领导关怀</span>
                <span>企业荣誉</span>
              </div>
              <div className="title">
                <h3>八位文化</h3>
                <span>八维理念</span>
                <span>八维精神</span>
                <span>文化驿站</span>
              </div>
              <div className="title">
                <h3>社会责任</h3>
                <span>社会公益</span>
                <span>大善之举</span>
              </div>
              <div className="title">
                <h3>联系我们</h3>
                <span>业务合作</span>
                <span>咨询报名</span>
                <span>联系方式</span>
              </div>
            </div>
            <div className="right">
              <img src="http://111.203.59.61:8060/static/img/wechat.e60a83ec.png" alt="" />
              <span>八维微信公众号</span>
            </div>
          </div>
        </div>
        <div className="bottombox">
          <div className="bottom">
            京公网安备 11010802031438号 © Copyright 2020. 八维教育版权所有 | 京ICP备12008262号-12
          </div>
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.getInfo();
  }
  async getInfo() {
    let res = await _getInfo();
    // console.log(res, '个人信息');
    if(res.data.user){
      this.setState({
        username: res.data.user.userName || '',
        role: res.data.user.roles[0].roleKey,
      });
    }else{
      router.push("/login")
    }
    
  }
}
export default BasicLayout;
